<template>
  <view class="container">
    <input class="container_input" type="nickname" placeholder="请输入" v-model="userName" @input="onNicknameInput" />
    <view class="container_tip"> 好名字可以让你的朋友更容易记住你。 </view>
    <button class="container_btn" @click="submit">保存</button>
  </view>
</template>

<script>
import { getToken, getUserInfo, setUserInfo } from '@/service/auth.js'

import navbarMixin from '@/mxins/navbar.js'
import { infoModify } from '@/service/api/mine.js'
export default {
  mixins: [navbarMixin],
  components: {},
  data() {
    return {
      user: {},
      userName: '',
    }
  },
  onLoad() {
    const data = getUserInfo()
    this.user = JSON.parse(data)
    if (this.user && this.user.userName) {
      this.userName = this.user.userName
    }
  },
  onShow() {
    const app = getApp()
  },
  created() {},

  methods: {
    onNicknameInput(e) {
      this.userName = e.detail.value
    },
    submit() {
      infoModify({ name: this.userName })
        .then(res => {
          console.log('res', res)
          this.uniShowToast(res.msg)
          this.user.userName = this.userName
          setUserInfo(this.user)
          uni.navigateBack({
            delta: 1,
          })
        })
        .catch(err => {
          console.log('err', err)
          this.uniShowToast(err.msg)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  background-color: #f6f6f6;
  width: 100vw;
  &_input {
    border-bottom: 1rpx solid #e5e5e5;
    margin: 30rpx;
    padding-bottom: 10rpx;
  }
  &_tip {
    margin: 0 30rpx;
  }
  &_btn {
    font-size: 28rpx;
    margin: 100rpx 30rpx;
    background-color: #e5e5e5;
  }
}
</style>
